/*
Generic reset.
*/

.flowchart * {
  padding: 0;
  margin: 0;
}

/*
Styles for nodes and connectors.
*/

.flowchart .node-rect {
  stroke: grey;
  stroke-width: 2;
}

.flowchart .mouseover-node-rect {
  stroke: grey;
  stroke-width: 4;
}

.flowchart .selected-node-rect {
  stroke: #F08C38;
  stroke-width: 3;
}

.flowchart .connector-circle {
  fill: white;
  stroke: grey;
  stroke-width: 2;
}

.flowchart .mouseover-connector-circle {
  fill: white;
  stroke: grey;
  stroke-width: 3;
}

/*
Style for connections.
*/

.flowchart .connection {
}

.flowchart .connection-line {
  stroke: grey;
  stroke-width: 4;
  fill: transparent;
}

.flowchart .mouseover-connection-line {
  stroke: grey;
  stroke-width: 6;
  fill: transparent;
}

.flowchart .selected-connection-line {
  stroke: #F08C38;
  stroke-width: 4;
  fill: transparent;
}

.flowchart .connection-endpoint {
  fill: gray;
}

.flowchart .selected-connection-endpoint {
  fill: #F08C38;
}

.flowchart .mouseover-connection-endpoint {
  fill: gray;
}

.flowchart .connection-name{
  fill: #F08C38;
  font-weight: bold;
}

.flowchart .selected-connection-name{
  fill: #F08C38;
  font-weight: bold;
}

.flowchart .mouseover-connection-name{
  fill: grey;
}
/*
Style for the connection being dragged out.
*/

.flowchart .dragging-connection {
  pointer-events: none;
}

.flowchart .dragging-connection-line {
  stroke: grey;
  stroke-width: 3;
  fill: transparent;
}

.flowchart .dragging-connection-endpoint {
  fill: grey;
}

/*
The element (in this case the SVG element) that contains the draggable elements.
*/

.flowchart .draggable-container {
  border: solid 1px blue;
}

/*
Drag selection rectangle.
*/

.flowchart .drag-selection-rect {
  stroke: #F08C38;
  stroke-width: 2;
  fill: transparent;
}

.flowchart .show {
  display:block;
}

.flowchart .hide {
  display:none;
}